<h1 mat-dialog-title>
  <span i18n>Create Account</span>
  @if (role === 'ADMIN') {
    <span class="badge badge-light ml-2">{{ role }}</span>
  }
</h1>
<div class="px-0" mat-dialog-content>
  <mat-stepper
    #stepper
    animationDuration="0ms"
    [linear]="true"
    [orientation]="data.deviceType === 'mobile' ? 'vertical' : 'horizontal'"
  >
    <mat-step editable="false" [completed]="isDisclaimerChecked">
      <ng-template i18n matStepLabel>Terms and Conditions</ng-template>
      <div class="pt-2">
        <ng-container i18n
          >Please keep your security token safe. If you lose it, you will not be
          able to recover your account.</ng-container
        >
      </div>
      <mat-checkbox
        class="mt-2"
        color="primary"
        (change)="onChangeDislaimerChecked()"
      >
        <ng-container i18n
          >I understand that if I lose my security token, I cannot recover my
          account</ng-container
        >
        @if (data.needsToAcceptTermsOfService) {
          <ng-container>&nbsp;</ng-container>
          <ng-container i18n
            >and I agree to the
            <a
              class="font-weight-bold"
              target="_blank"
              [routerLink]="routerLinkAboutTermsOfService"
              >Terms of Service</a
            >.</ng-container
          >
        } @else {
          <ng-container>.</ng-container>
        }
      </mat-checkbox>
      <div class="mt-3" mat-dialog-actions>
        <div class="flex-grow-1">
          <button i18n mat-button [mat-dialog-close]="undefined">Cancel</button>
        </div>
        <div>
          <button
            color="primary"
            mat-flat-button
            [disabled]="!isDisclaimerChecked"
            (click)="createAccount()"
          >
            <span i18n>Continue</span>
            <ion-icon class="ml-1" name="arrow-forward-outline" />
          </button>
        </div>
      </div>
    </mat-step>
    <mat-step editable="false">
      <ng-template i18n matStepLabel>Security Token</ng-template>
      <div class="pt-2">
        <ng-container i18n
          >Here is your security token. It is only visible once, please store
          and keep it in a safe place.</ng-container
        >
      </div>
      <mat-form-field appearance="outline" class="pt-3 w-100 without-hint">
        <mat-label i18n>Security Token</mat-label>
        <textarea
          cdkTextareaAutosize
          matInput
          readonly
          type="text"
          [(value)]="accessToken"
        ></textarea>
        <div class="float-right mt-1">
          <button
            color="secondary"
            mat-flat-button
            [cdkCopyToClipboard]="accessToken"
            (click)="enableCreateAccountButton()"
          >
            <ion-icon class="mr-1" name="copy-outline" />
            <span i18n>Copy to clipboard</span>
          </button>
        </div>
      </mat-form-field>
      <div align="end" class="mt-1" mat-dialog-actions>
        <div>
          <button
            color="primary"
            mat-flat-button
            matStepperNext
            [disabled]="isCreateAccountButtonDisabled"
            [mat-dialog-close]="authToken"
          >
            <ng-container i18n>Create Account</ng-container>
          </button>
        </div>
      </div>
    </mat-step>

    <ng-template matStepperIcon="done">
      <ion-icon name="checkmark-outline" />
    </ng-template>
  </mat-stepper>
  <div></div>
</div>
